import React, { useState } from 'react';
import './PollModal.css';

interface PollModalProps {
  isOpen: boolean;
  onClose: () => void;
  onCreatePoll: (pollData: PollData) => void;
}

interface PollData {
  question: string;
  options: string[];
  allowMultiple: boolean;
  expiresAt?: string;
}

const PollModal: React.FC<PollModalProps> = ({
  isOpen,
  onClose,
  onCreatePoll,
}) => {
  const [question, setQuestion] = useState('');
  const [options, setOptions] = useState(['', '']);
  const [allowMultiple, setAllowMultiple] = useState(false);
  const [expiresAt, setExpiresAt] = useState('');

  const addOption = () => {
    if (options.length < 10) {
      setOptions([...options, '']);
    }
  };

  const removeOption = (index: number) => {
    if (options.length > 2) {
      const newOptions = options.filter((_, i) => i !== index);
      setOptions(newOptions);
    }
  };

  const updateOption = (index: number, value: string) => {
    const newOptions = [...options];
    newOptions[index] = value;
    setOptions(newOptions);
  };

  const handleSubmit = () => {
    if (!question.trim()) {
      alert('请输入投票问题');
      return;
    }

    const validOptions = options.filter(option => option.trim());
    if (validOptions.length < 2) {
      alert('至少需要两个选项');
      return;
    }

    const pollData: PollData = {
      question: question.trim(),
      options: validOptions,
      allowMultiple,
      expiresAt: expiresAt || undefined,
    };

    onCreatePoll(pollData);

    // 重置表单
    setQuestion('');
    setOptions(['', '']);
    setAllowMultiple(false);
    setExpiresAt('');
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="poll-modal-overlay">
      <div className="poll-modal">
        <div className="poll-modal-header">
          <h3>创建投票</h3>
          <button className="close-btn" onClick={onClose}>
            ×
          </button>
        </div>

        <div className="poll-modal-body">
          <div className="form-group">
            <label>投票问题</label>
            <input
              type="text"
              value={question}
              onChange={e => setQuestion(e.target.value)}
              placeholder="请输入投票问题"
              maxLength={100}
            />
          </div>

          <div className="form-group">
            <label>投票选项</label>
            {options.map((option, index) => (
              <div key={index} className="option-input">
                <input
                  type="text"
                  value={option}
                  onChange={e => updateOption(index, e.target.value)}
                  placeholder={`选项 ${index + 1}`}
                  maxLength={50}
                />
                {options.length > 2 && (
                  <button
                    type="button"
                    className="remove-option-btn"
                    onClick={() => removeOption(index)}
                  >
                    ×
                  </button>
                )}
              </div>
            ))}

            {options.length < 10 && (
              <button
                type="button"
                className="add-option-btn"
                onClick={addOption}
              >
                + 添加选项
              </button>
            )}
          </div>

          <div className="form-group">
            <label className="checkbox-label">
              <input
                type="checkbox"
                checked={allowMultiple}
                onChange={e => setAllowMultiple(e.target.checked)}
              />
              允许多选
            </label>
          </div>

          <div className="form-group">
            <label>截止时间（可选）</label>
            <input
              type="datetime-local"
              value={expiresAt}
              onChange={e => setExpiresAt(e.target.value)}
            />
          </div>
        </div>

        <div className="poll-modal-footer">
          <button className="cancel-btn" onClick={onClose}>
            取消
          </button>
          <button className="create-btn" onClick={handleSubmit}>
            创建投票
          </button>
        </div>
      </div>
    </div>
  );
};

export default PollModal;
